// 项目监管

<template>
  <f7-page class="supervise">
    <f7-navbar>
      <f7-nav-left>
        <f7-link @click.native="fnToHome()" icon-material="chevron_left" force></f7-link>
      </f7-nav-left>
      <f7-nav-title>项目监管</f7-nav-title>
      <f7-nav-right>
        <f7-icon f7="house" @click.native="fnToHome()"></f7-icon>
      </f7-nav-right>
    </f7-navbar>

    <div class="info">
      <span class="back"></span>
      <div>
        <h4 @click="fnDetail()">
          {{ model.engineeName }}
          <van-icon name="arrow" />
        </h4>
        <div class="gcbm">
          <span>项目编码：{{ model.engineeCode }}</span>
        </div>

        <div class="tags">
          <span
            class="tag tag-blue"
            v-if="model.safeOpenStatusName || model.qualityOpenStatusName"
            >{{ model.safeOpenStatusName || model.qualityOpenStatusName }}</span
          >
          <span class="tag tag-blue" v-if="model.progressName">{{
            model.progressName
          }}</span>
        </div>

        <div class="jd">
          <section>
            <label> <i></i>施工单位 </label>
            <span>{{ model.constructionName }}</span>
          </section>
          <section>
            <label> <i></i>项目经理 </label>
            <span>{{ model.xmjlName }}</span>
          </section>
        </div>

        <div
          class="address"
          @click="
            fnToPage({
              name: '项目定位',
              href: '/business/construction/enginee/positioning/index',
            })
          "
        >
          <i></i>{{ model.engineeAddress }}
        </div>
      </div>
    </div>

    <ul class="blue-card">
      <li @click="fnTurnDown('/business/construction/enginee/dangerous/index')">
        <div>
          <span>超危大工程</span>
          <span
            ><span class="color">{{ model.danger2Count }}</span
            >&nbsp;项</span
          >
        </div>
        <div>
          <span>危大工程</span>
          <span
            ><span class="color">{{ model.danger1Count }}</span
            >&nbsp;项</span
          >
        </div>
      </li>
      <i></i>
      <li
        @click="
          fnTurnDown('/business/construction/enginee/videoMonitoring/list')
        "
      >
        <div>
          <span>视频监控</span>
          <span
            ><span class="color">{{ model.allCameraCount }}</span
            >&nbsp;个</span
          >
        </div>
        <div>
          <span>可视数量</span>
          <span
            ><span class="color">{{ model.onLineCameraCount }}</span
            >&nbsp;个</span
          >
        </div>
      </li>
    </ul>

    <!-- <ul class="white-card">
            <template v-for="(item, index) in whiteCard">
                <li :key="index"
                    @click="fnToPage(item)">
                    <f7-icon :f7="item.icon"></f7-icon>
                    <span>{{item.name}}</span>
                </li>
            </template>
        </ul> -->
    <qm-block title="我的应用" style="background: #fff">
      <f7-block class="function-list">
        <qm-entry-miniapp
          v-for="(items, index) in whiteCard"
          :key="index"
          :data="items"
          :parmas="model"
          :father="this"
          iconWidth="80"
        ></qm-entry-miniapp>
        <qm-entry-miniapp
          :data="whole"
          :parmas="model"
          iconWidth="80"
        ></qm-entry-miniapp>
      </f7-block>
    </qm-block>
  </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";

export default class instance extends controller {
  onBeforeInit() {
    this.urls = {
      model: "/project/enginee/getEngineeBaseInfoById",
    };
  }
  onAfterQuery(type, isSuccess, result) {
    if (type == "form" && isSuccess) {
      this.$data.model = result.parameters;
    }

    return result;
  }
  mixin() {
    return {
      data() {
        return {
          whole: {
            serverUrl: "/business/construction/enginee/application",
            iconUrl: "static/img/function-entrance/index1/icon-more.png",
            serverName: "全部应用",
          },

          model: {},
          // 白色卡片的数据
          whiteCard: [],
        };
      },
      methods: {
        // 数据下转
        fnTurnDown(url) {
          this.$f7router.navigate(`${url}?engineeId=${this.model.engineeId}`);
        },
        // 跳转项目详情
        fnDetail() {
          this.$f7router.navigate(
            `/business/construction/enginee/detail/index?engineeId=${this.model.engineeId}&pageAction=view`
          );
        },
        // 跳转页面
        fnToPage(item) {
          if (item.href) {
            if (item.name == "项目定位") {
              this.$util
                .getPromise("/project/position/getByEngineeId", {
                  engineeId: this.model.engineeId,
                })
                .then((result) => {
                  if (result.parameters.caseId) {
                    this.$util
                      .getPromise(`/workflow/getWorkflowArgs`, {
                        formId: result.parameters.caseId,
                      })
                      .then((result) => {
                        this.$f7router.navigate(
                          item.href +
                            `?engineeId=${this.model.engineeId}&pageAction=${result.pageAction}&taskId=${result.historyTaskId}&historyTaskId=${result.historyTaskId}&version=${result.version}&appCode=positionCase&assigneeId=${result.assigneeId}`
                        );
                      });
                  } else {
                    //新增
                    this.$f7router.navigate(
                      item.href +
                        `?engineeId=${this.model.engineeId}&pageAction=create&appCode=positionCase`
                    );
                  }
                });
            } else if (item.name == "人员签到") {
              this.$f7router.navigate(
                item.href +
                  `?engineeId=${this.model.engineeId}&pageAction=create`
              );
            } else {
              this.$f7router.navigate(
                item.href + `?engineeId=${this.model.engineeId}`
              );
            }
          }
        },
        //获取我的应用
        getFrequently() {
          let params = {
            userId: this.$f7.data.currentUser.userId,
            appCode: this.$f7.id || window.qmplus.runtime.appid,
            windowsId: "0e004663-2621-4c79-a283-f08ce90313b9",
          };
          if (window.qmsdk) {
            params.windowsId = window.plus.webview.currentWebview().id;
            params.success = (r) => {
              this.whiteCard = r.data;
            };
            window.qmsdk.callEvent("getFrequently", params);
          } else {
            this.$f7.request.postJSON(
              "/api/app/mobileServer/getFrequently",
              params,
              (r) => {
                this.whiteCard = r.data;
              }
            );
          }
        },
        test() {
          console.log(111);
        },
      },
      created() {
        this.getFrequently();
      },
    };
  }
}
</script>

<style lang="less" scoped>
.supervise {
  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -80px;

    > .back {
      width: 100%;
      height: 95px;
      background: linear-gradient(
        180deg,
        #3385ff 0%,
        rgba(51, 133, 255, 0) 100%
      );
      border-radius: 1px;
    }

    > div {
      position: relative;
      top: -80px;
      padding: 16px 14px;
      box-sizing: border-box;
      width: 343px;
      min-height: 220px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(136, 136, 136, 0.04);
      border-radius: 8px;

      > h4 {
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        color: #242424;
        line-height: 23px;

        > .van-icon {
          margin-left: 10px;
          flex-shrink: 0;
        }
      }

      .gcbm {
        padding: 6px 0 10px;
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 400;
        color: #8995ac;
        line-height: 19px;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .tag {
          max-width: 300px;
          margin: 0 6px 6px 0;
        }
      }

      .jd {
        background: linear-gradient(
          90deg,
          #e4efff 0%,
          rgba(120, 174, 255, 0.12) 61%,
          rgba(51, 133, 255, 0) 100%
        );
        border-radius: 4px;
        padding: 12px;
        margin: 15px 0;

        section {
          display: flex;
          justify-content: space-between;
          padding: 6px 0;

          label {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            color: #9ea7b7;
            line-height: 17px;

            i {
              margin-right: 4px;
              width: 14px;
              height: 14px;
              background-position: center;
              background-size: cover;
              background-repeat: no-repeat;
            }
          }

          &:nth-of-type(1) i {
            background-image: url("../../../../assets/img/sg.png");
          }

          &:nth-of-type(2) i {
            background-image: url("../../../../assets/img/jl.png");
          }

          > span {
            font-size: 12px;
            font-weight: 400;
            color: #61677a;
            line-height: 17px;
          }
        }
      }

      .address {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        color: #61677a;
        line-height: 17px;

        i {
          width: 22px;
          height: 22px;
          margin-right: 10px;
          background: url("../../../../assets/img/dt.png") no-repeat center /
            cover;
        }
      }
    }
  }

  .blue-card {
    display: flex;
    justify-content: space-between;
    width: 343px;
    margin: 10px auto;

    > i {
      width: 8px;
    }

    li {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      display: flex;
      flex: 1;
      padding: 12px 15px;
      border-radius: 8px;
      align-items: center;
      height: 75px;
      box-sizing: border-box;

      &:nth-of-type(1) {
        background-image: url("../../../../assets/img/bg_weida@2x.png");
      }

      &:nth-of-type(2) {
        background-image: url("../../../../assets/img/bg_shipin@2x.png");
      }

      > div {
        flex: 1;
        display: flex;
        flex-direction: column;

        span {
          font-size: 13px;
          font-weight: 400;
          color: #61677a;
          line-height: 18px;
          display: flex;
          align-items: baseline;

          .color {
            color: #0f1826;
            font-size: 20px;
          }
        }
      }
    }

    li.video {
      > div {
        span {
          .color {
            color: #3385ff;
          }
        }
      }
    }
  }

  .white-card {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

    li {
      background-color: #fff;
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .f7-icons {
        color: #3385ff;
        margin-bottom: 10px;
      }
    }
  }
  .function-list {
    display: grid;
    grid-template-columns: repeat(4, 18%);
    grid-row-gap: calc(36px * var(--ratio));
    justify-content: space-between;
  }

  .qm-block {
    width: 343px;
    margin: 0 auto;
  }
}
</style>
